<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function search() {
            //1.创建xhr异步对象
            var xhr = new XMLHttpRequest();
            //2.创建请求,打开连接
            xhr.open("get", `/laptop/v1/laptop_get`, true)
            //3.发送请求
            xhr.send();
            //4.接收响应
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var r = xhr.responseText;
                    var arr = JSON.parse(r);
                    var htmlStr = `
                    <table border="1">
                        <tr>
                            <th>编号</th>
                            <th>所属家族编号</th>
                            <th>主标题</th>
                            <th>价格</th>
                            <th>服务承诺</th>
                            <th>规格/颜色</th>
                            <th>所属分类</th>
                            <th>产品详细说明</th>
                            <th>上架时间</th>
                            <th>已售出的数量</th>
                            <th>是否促销中</th>
                            <th>尺寸</th>
                            <th>面料</th>
                            <th>适用季节</th>
                            <th>版型</th>
                            <th>操作</th>
                        </tr>
                    `
                    for (var i = 0; i < arr.length; i++) {
                        htmlStr += `
                        <tr>
                            <td>${arr[i].lid}</td>
                            <td>${arr[i].family_id}</td>
                            <td>${arr[i].title}</td>
                            <td>${arr[i].price}</td>
                            <td>${arr[i].promise}</td>
                            <td>${arr[i].spec}</td>
                            <td>${arr[i].category}</td>
                            <td>${arr[i].details}</td>
                            <td>${arr[i].shelf_time}</td>
                            <td>${arr[i].sold_count}</td>
                            <td>${arr[i].is_onsale}</td>
                            <td>${arr[i].size}</td>
                            <td>${arr[i].Fabric}</td>
                            <td>${arr[i].season}</td>
                            <td>${arr[i].vtype}</td>
                            <td>
                                <a href="laptop_search.html?lid=${arr[i].lid}">修改</a>
                                <a href="javascript:del(${arr[i].lid})">删除</a>
                            </td>
                        </tr>
                        `
                    }
                    htmlStr += `
                        </table>
                    `
                    d1.innerHTML = htmlStr;
                }
            }
        }
        function del($lid) {
            // //0.收集填入的信息
            // var $lid = lid.value;
            // if (!$lid) {
            //     alert("编号不能为空");
            //     return;
            // }
            //1.创建异步对象
            var xhr = new XMLHttpRequest();
            //2.创建请求
            xhr.open("delete", `/laptop/v1/laptop_del/${$lid}`, true);
            //3.发送请求
            xhr.send();
            //4.接收响应
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var r = xhr.responseText;
                    if (r == 1) {
                        alert("删除成功")
                        location.href="laptop_get.html"
                    } else {
                        alert("删除失败")
                    }
                }
            }
        }
    </script>
</head>

<body onload="search()">
    <div id="d1"></div>
</body>

</html>